挑戰目標: MockNative Camp前端

今天原本是要來refactor和解決hover的問題的，但是在將navtab給component化時遭遇難題，首先將tab的資訊給寫入next.config.js

module.exports = {
    images: {
        domains: ['nativecamp.net']
    },
    serverRuntimeConfig: {
        navTab: [
            { name: "首頁", image: "https://nativecamp.net/user/images/gnavi/ic_home.svg", imageHov: "https://nativecamp.net/user/images/gnavi/ic_home-h.svg" },
            { name: "指南", image: "https://nativecamp.net/user/images/gnavi/ic_guide.svg", imageHov: "https://nativecamp.net/user/images/gnavi/ic_guide-h.svg" },
            { name: "學習", image: "https://nativecamp.net/user/images/gnavi/ic_study.svg", imageHov: "https://nativecamp.net/user/images/gnavi/ic_study-h.svg" },
            { name: "搜尋・預約講師", image: "https://nativecamp.net/user/images/gnavi/ic_search.svg", imageHov: "https://nativecamp.net/user/images/gnavi/ic_search-h.svg" },
            { name: "其他", image: "https://nativecamp.net/user/images/gnavi/ic_etc.svg", imageHov: "https://nativecamp.net/user/images/gnavi/ic_etc-h.svg" },
        ]
    }
}

會使用serverRuntimeConfig是看了官方的文件，使用的方式也很簡單

import getConfig from 'next/config'

function Nav() {
const { serverRuntimeConfig } = getConfig();
}

先看一下我們component化的NavTab.js，使用props傳入圖片以及tab名稱

import { useState } from 'react';
import Image from "next/image";

function NavTab({ image, imageHov, name }) {
    const [isHovering, setIsHovered] = useState(false);
    const onMouseEnter = () => setIsHovered(true);
    const onMouseLeave = () => setIsHovered(false);

    return (
        <li className="w-48 flex items-center justify-center cursor-pointer text-nativeCamp-nav-text hover:text-nativeCamp-nav-textHov border-b-4 border-white hover:border-nativeCamp-nav-textHov"
            onMouseEnter={onMouseEnter}
            onMouseLeave={onMouseLeave}>
            <div className="space-y-2 w-48 flex justify-center items-center flex-col">
                <div className="relative flex h-[28px] w-[28px]">

                    {isHovering ? (
                        <Image
                            src={imageHov}
                            layout="fill"
                            objectFit="contain"
                        />
                    ) : (
                        <Image
                            src={image}
                            layout="fill"
                            objectFit="contain"
                        />
                    )}
                </div>
                <div className="pb-2" >
                    <span className="text-sm">{name}</span>
                </div>
            </div>
        </li>
    )
}

export default NavTab

然後將Nav.js修改一下，

import getConfig from 'next/config'
import NavTab from './NavTab'

function Nav() {

    const { serverRuntimeConfig } = getConfig();
    return (
        <div className="">
            <ul className="flex flex-row items-center justify-center pt-2 border-b">
                {serverRuntimeConfig.navTab?.map(({ image, imageHov, name }) => (
                    <NavTab key={name} image={image} imageHov={imageHov} name={name} />
                ))}
            </ul>
        </div>
    )
}
export default Nav

然後發現出事啦阿伯！
console顯示錯誤，這錯誤還是第一次遇到，但因為時間不夠，還沒找到解法...現實總是如此出乎意料呢

react-dom.development.js:67 Warning: Did not expect server HTML to contain a <li> in <ul>.

明天看能不能把他解決再往下繼續挑戰